/*
 *@Author: 张楚
 *@Date: 2021-08-09 20:11:05
 *@Description: 王叔的滚动教程
*/

import 'package:flutter/material.dart';

class ListWheelScrollViewPage extends StatefulWidget {
  const ListWheelScrollViewPage({Key key}) : super(key: key);
  @override
  _ListWheelScrollViewPageState createState() =>
      _ListWheelScrollViewPageState();
}

class _ListWheelScrollViewPageState extends State<ListWheelScrollViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListWheelScrollView'),
      ),

      ///RotatedBox,将child里面所有的组件，都横着摆放起来。
      body: RotatedBox(
        quarterTurns: 1,
        child: ListWheelScrollView(
          itemExtent: 100,
          children: List.generate(
            10,
            (index) => RotatedBox(
              quarterTurns: -1,
              child: Container(
                alignment: Alignment.center,
                color: Colors.blue,
                child: Text(
                  '$index',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          ),
          // offAxisFraction: -1.5, //偏移量，负右边偏移
          // diameterRatio: 0.8, //每个横块之间的间隔
          overAndUnderCenterOpacity: 0.5, //中间横块上下都为透明
          // magnification: 2.5, //放大镜效果
          ///如果没有overAndUnderCenterOpacity，则需要开启useMagnifier,才能打开放大镜
          useMagnifier: true,
          physics: FixedExtentScrollPhysics(),
          onSelectedItemChanged: (v) {
            print('选择的是第$v个');
          },
        ),
      ),
    );
  }
}
